<style lang='less'>
  .main-color{
    color:#f56a00;
    font-size:36rpx;
  }
  .marsk_inner{
    width:100vw;
    min-height:100px;
    background: #efefef;
    position:fixed;
    bottom:60px;
    padding:20px;
    animation-delay:.3s;
  }
  .img-go{
    width:44rpx;
    height:44rpx;
  }
  .star-img{
    width:24rpx;
    height:24rpx;
  }
  .m-text{
    font-size:24rpx;
  }
  .op-img{
    width:60rpx;
    height:60rpx;
  }
  .qx-label{
    border:1px solid #ccc;
    color:#888;
    font-size:26rpx;
    padding:10rpx 14rpx;
    border-radius: 20rpx;
    margin-right:20rpx;
  }
  .marsk_wrap{
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,.6);
  }
  .fadeOut{
    display:none;
  }
  .main-position.weui-flex{
    align-items: center;
    position: fixed;
    background: rgba(0,0,0,.4);
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    min-width: 120rpx;
    margin: 20rpx;
    .img-position{
      width:44rpx;
      height:44rpx;
    }
    .text-position{
      font-size:28rpx;
      color:#fff;
    }
  }
</style>
<template>
  <div>
    <map
      id="myMap"
      style="width: 100vw; height: 100vh"
      :latitude="latitude"
      :longitude="longitude"
      :markers="covers"
      @markertap='markertap'
      show-location
    >
    <cover-view class='main-position weui-flex'>
      <cover-image class = 'img-position' src='../../static/image/position@2x.png'></cover-image>
      <cover-view class = 'text-position'>{{district}}</cover-view>
    </cover-view>
    <cover-view
      class='marsk_wrap animated'
      :class='{fadeIn:finit,fadeOut:!finit}'
      @click='finit=false'
    >
      <cover-view
        class='marsk_inner animated'
        :class='{fadeInUp:finit,fadeOutDown:!finit}'
      >
        <cover-view class='weui-flex'>
          <cover-view class='main-color name'>{{currentFactory.factoryName}}</cover-view>
          <cover-image class='img-go' src='../../static/image/Path@2x.png'></cover-image>
        </cover-view>
        <cover-view class='weui-flex' style = 'margin-top:16rpx;'>
          <cover-view style='flex:3'>
            <cover-view class='m-text'>{{currentFactory.distanceKM}}km | {{currentFactory.factoryAddress}}</cover-view>
            <cover-view class='weui-flex' style='margin-top:10rpx;' v-if='startInit'>
              <cover-image v-for="(key,i) in allStar" :key="key" class='star-img' src='../../static/image/allStar.png'></cover-image>
              <cover-image v-for="(key,i) in noStar" :key="key" class='star-img' src='../../static/image/noStar.png'></cover-image>
              <cover-view class='m-text main-color'>{{currentFactory.appraiseScore}}分</cover-view>
            </cover-view>
          </cover-view>
          <cover-view style='flex:1'>
            <cover-image @click.stop='call(currentFactory.phone)' class='op-img' src='../../static/image/矢量智能对象2@2x.png'></cover-image>
          </cover-view>
          <cover-view style='flex:1'>
            <cover-image @click.stop='dh(currentFactory.factoryLongtitude,currentFactory.factoryLatitude)' class='op-img' src='../../static/image/导航@2x.png'></cover-image>
          </cover-view>
        </cover-view>
        <cover-view class = 'weui-flex' style = 'margin-top:16rpx;'>
          <cover-view class='qx-label'>汽车维修</cover-view>
          <cover-view class='qx-label'>紧急救援</cover-view>
        </cover-view>
      </cover-view>
    </cover-view>
    </map>
  </div>
</template>

<script>


export default {
  components: {

  },

  data () {
    return {
      allStar:[],
      noStar:[],
      district:"宝安区",
      startInit:true,
      finit:false,
      latitude: null,
      longitude: null,
      covers: [],
      Rscale:15,
      currentFactory:{
        factoryName:"维修城",
        appraiseScore:3.3,
        phone:17603006126
      }
    }
  },
  mounted (){
    wx.showLoading({
      title:"加载中",
      mask:true
    });
    this.mapCtx = wx.createMapContext('myMap');
    this.getLocation();
    this.getCity()
  },
  methods : {
    //解码地址
    getCity: function(){
      let _this = this;
      wx.getLocation({
        success: function(res){
          let position = `&location=${res.latitude},${res.longitude}`;
          _this.http(_this.baiduPOI+position,{},res=>{
            let data = res.data.result.addressComponent;
            _this.district = data.district;
          })
        }
      })
    },
    //点击导航
    dh: function(longitude,latitude){
      this.finit = false;
      let position = {
        longitude:longitude,
        latitude:latitude
      };
      this.openLocation(position)
    },
    //微信打开地点
    openLocation: function(position){
      let _this = this;
      wx.openLocation({
        latitude: position.latitude,
        longitude: position.longitude,
        scale: 15
      })
    },
    //点击打电话
    call: function(phone){
      this.finit = false;
      wx.makePhoneCall({
        phoneNumber: phone.toString()
      })
    },
    //初始化定位
    getLocation: function(){
      let _this = this;
      wx.getLocation({
        type:"gcj02",
        success: function(res){
          _this.longitude = res.longitude;
          _this.latitude = res.latitude;
          _this.covers[0] = {
            id:0,
            callout:{
              content:"我在这儿",
              bgColor:"#fff",
              color:"#f56a00",
              fontSize:14,
              borderRadius:4,
              padding:10,
              display:'ALWAYS',
              textAlign: 'center'
            },
            latitude : res.latitude,
            longitude: res.longitude,
            iconPath: './image/me.png',
            width:38,
            height:61
          };
          _this.getAllFactory(res);
        }
      })
    },
    //点击地点
    markertap: function(res){
      let markerId = res.mp.markerId;
      if( markerId!=0 ){
        //this.finit = true;
        this.handleTap(markerId)
      }
    },
    //获取点击时刻的中心点，在完成渲染后恢复中心点
    handleTap: function(markerId){
      let _this = this;
      this.mapCtx.getCenterLocation({
        success: function(res){
          _this.relHandleTap(markerId,function(){
            _this.latitude = res.latitude;
            _this.longitude = res.longitude;
          })
        }
      });
    },
    relHandleTap: function(markerId,cb){
        this.covers.map(item=>{
          if(item.id == markerId){
            this.currentFactory = item;
          }
        });
        this.allStar = [];
        this.noStar = [];
        if(this.currentFactory.appraiseScore!=null){
          let len = parseInt(this.currentFactory.appraiseScore);
          let flen = 5 - len;
          for(let i=0 ; i<len ; i++){
            this.allStar.push(i);
          };
          for(let i=0 ; i<flen ; i++){
            this.noStar.push(i);
          };
        }else{
          this.noStar = new Array(1,2,3,4,5);
        };
        this.finit = true;
        cb.call(this);
    },
    //根据定位获取维修厂
    getAllFactory: function(position){
      this.getList(position);
    },
    getList: function(position){
      let _this = this;
      let data = {};
      data.factoryCity = "深圳市",
      data.factoryLongtitude = position.longitude;
      data.factoryLatitude = position.latitude;

      // let location = [{
      //   factoryLongtitude:113.943,
      //   factoryLatitude:22.5307,
      //   factoryName:"维修城",
      //   appraiseScore:3.3,
      //   phone:17603006126
      // }];
      // location.map((item,index)=>{
      //   item.longitude = item.factoryLongtitude;
      //   item.latitude = item.factoryLatitude;
      //   item.id = index+1;
      //   item.iconPath = './image/location.png';
      //   item.width = 38;
      //   item.height = 61;
      // });
      // location.map(item=>{
      //   _this.covers.push(item);
      // });

      this.http(this.Api.userApp.getFactory,data,res=>{
        if(res.data.code == 0){
          let location = res.data.object || [];
          location.map((item,index)=>{
            item.longitude = item.factoryLongtitude;
            item.latitude = item.factoryLatitude;
            item.id = index+1;
            item.iconPath = './image/location.png';
            item.width = 38;
            item.height = 61;
          });
          location.map(item=>{
            _this.covers.push(item);
          });
          wx.hideLoading();
        }
      })
    }
  }
}
</script>


